<template>
  <div class="page">
    <global-header title="用户报表" @back="$router.back()">
      <template #right>
        <div class="mr-[10px]">
          <RangeDatePopup v-model:date="searchParams.date" />
        </div>
      </template>
    </global-header>
    <main class="page-main !overflow-hidden page">
      <SearchArea :show-issue="false" @search="handleSearch" :statusOptions="statusOptions" />
      <div class="bg-white mt-[10px]">
        <div
          class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px] px-[15px]"
          style="border-bottom: 1px solid #e4e4e4"
        >
          <div class="w-[25%] text-center">用户名</div>
          <div class="w-[25%] text-center">余额</div>
          <div class="w-[25%] text-center">当前流水</div>
          <div class="w-[25%] text-center">当前盈亏</div>
        </div>
      </div>
      <div class="page-main" ref="scrollRef">
        <div class="bg-white">
          <scroll-list
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @load="load"
          >
            <template v-for="item in list">
              <UserItem :item="item" @detailEvent="detailEvent(item)"/>
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
    <DetailPopup ref="detailPopupRef"/>
  </div>
</template>
<route>
  {
    name: "admin-report-user",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import UserItem from "./components/user/user-item.vue";
import SearchArea from "./components/search-area.vue";
import DetailPopup from './components/user/user-detail-popup.vue'

import moment from "moment";
import { reqReportUser } from "@/api/report";
import { useList } from "@/hooks/useList";

interface Params {
  Name?: string;
  Status?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: string | number;
}

const statusOptions = [
  { text: "已结算", value: "1" },
  { text: "未结算", value: "0" }
];

const searchParams = reactive({
  Name: "",
  Type: "1",
  LotteryId: -1,
  date: <Date[]>[moment().toDate(), moment().toDate()]
});
const detailPopupRef = ref()

provide("searchParams", searchParams);

const getParams = () => {
  const params: Params = {};
  if (searchParams.Name) {
    params.Name = searchParams.Name;
  }
  if (searchParams.Type) {
    params.Status = searchParams.Type;
  }
  if (searchParams.LotteryId && searchParams.LotteryId != -1) {
    params.LotteryId = searchParams.LotteryId;
  }
  if (searchParams.date) {
    params.StartDate = moment(searchParams.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(searchParams.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, search, load } = useList<ReportUserMo, Params>(
  reqReportUser,
  getParams
);

const handleSearch = () => {
  search();
};

watch(
  () => searchParams.date,
  () => {
    nextTick(handleSearch);
  }
);

const detailEvent = (item: any) => {
  detailPopupRef.value?.open(item)
}

onMounted(() => {
  getData();
});
</script>

<style scoped></style>
